<template>
	<table class="text_align">
		<th class="thstyle" v-for="(x, index) in proxyTableInfo['_row']" :key="'th_' + index">{{ proxyTableInfo['th'][x] }}</th>
		<tr v-for="(y, indexy) in proxyTableInfo['_column']" :key="'tr_' + indexy">
			<td draggable="false" :class="'tdSelect ' + 'x_' + x + ' ' + 'y_' + y" v-for="(x, index) in proxyTableInfo['_row']" :key="'td_' + index">
				{{ proxyTableInfo['info'][y][x] }}
			</td>
		</tr>
	</table>
</template>

<script setup>
import * as Dt_js from './dreamTable.js';
import { reactive } from 'vue';

let proxyTableInfo = reactive({
	data: ['_row', '_column', 'th',"info"],
	_row: ['id', 'name', 'value', 'settime'],
	_column: ['23006', '177982', '46227'],
	th: { id: 'ID', name: '名字', value: '取值', settime: '建立時間' },
	info: {
		'23006': { id: '23006', name: '古書', value: '中庸', settime: '-2093.03.23' },
		'177982': { id: '177982', name: '古琴', value: '高山流水', settime: '-1683.04.27' },
		'46227': { id: '46227', name: '角鹿', value: '戰爭', settime: '-1493.03.23' }
	}
});
Dt_js.initInfo(proxyTableInfo)
</script>

<style scoped lang="scss">
.text_align {
	border-collapse: collapse;
	text-align: center;
}
.thstyle {
	border-bottom: 1px solid #000;
}
.x_id {
	text-align: start;
}

.tdSelect {
	position: relative;
	cursor: auto;
	user-select: text;
}

tr:nth-child(even) {
	background-color: #eee;
}
</style>
